<template>
  <div>
    <MainContent title="AI外呼配置">
      <el-form
        :model="form"
        ref="systemForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="appKey" prop="appKey">
          <el-input
            v-model="form.appKey"
            autocomplete="off"
            placeholder="请输入appKey"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="appSecret" prop="appSecret">
          <el-input
            v-model="form.appSecret"
            autocomplete="off"
            placeholder="请输入appSecret"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="租户id" prop="tenantId">
          <el-input
            v-model="form.tenantId"
            autocomplete="off"
            placeholder="请输入租户id"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="url" prop="url">
          <el-input
            v-model="form.url"
            autocomplete="off"
            placeholder="请输入请求地址"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(systemForm)"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </MainContent>
  </div>
</template>

<script lang="ts" setup>
import { getAIConfig, saveAIConfig } from "@/api/system";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
const systemForm = ref<FormInstance>();
const form = ref({
  id: "",
  appKey: "",
  appSecret: "",
  tenantId: "",
  url: "",
});
const rules = reactive({
  appKey: [
    {
      required: true,
      message: "请输入appKey",
      trigger: "blur",
    },
  ],
  appSecret: [
    {
      required: true,
      message: "请输入appSecret",
      trigger: "blur",
    },
  ],
  tenantId: [
    {
      required: true,
      message: "请输入租户id",
      trigger: "blur",
    },
  ],
  url: [
    {
      required: true,
      message: "请输入请求地址",
      trigger: "blur",
    },
  ],
});

const query = async () => {
  const rs: any = await getAIConfig();
  if (rs.code == 200) {
    Object.assign(form.value, {
      ...rs.payload,
    });
  }
};
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      let rs: any;
      rs = await saveAIConfig(form.value);
      if (rs.code == 200) {
        ElMessage({
          type: "success",
          message: "保存成功",
        });
        query();
      }
    } else {
      console.log("报错啦！请重新使一下", fields);
    }
  });
};
onMounted(() => {
  query();
});
</script>
<style lang="scss" scoped>
:deep(.el-form) {
  margin-top: 20px;
}
</style>
